<h3>Create a concurrency</h3>
<app-project-concurrency-form [project]="project" (refresh)="load()"></app-project-concurrency-form>

<h3>Concurrencies list:</h3>
<div class="list">
    <nz-table #table [nzData]="concurrencies" [nsAutoHeightTable]="39" [nzFrontPagination]="false" nzSize="small"
        [nzLoading]="loading.list">
        <thead>
            <tr>
                <th>Name</th>
                <th>Description</th>
                <th>Deletion</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let data of table.data">
                <td (click)="selectConcurrency(data)">{{data.name}}</td>
                <td (click)="selectConcurrency(data)">{{data.description}}</td>
                <td>
                    <button nz-button nzDanger nzType="primary" [nzLoading]="loading.action" nz-popconfirm
                        nzPopconfirmTitle="Are you sure you want to delete this variableset ? it will remove all items"
                        (nzOnConfirm)="deleteConcurrency(data)">Delete</button>
                </td>
            </tr>
        </tbody>
    </nz-table>
    <nz-drawer class="toto" nzPlacement="right" [nzWidth]="1000" [nzTitle]="selectedConcurrency?.name"
        [nzVisible]="selectedConcurrency" (nzOnClose)="unselectConcurrency()">
        <ng-container *nzDrawerContent>
            <app-project-concurrency-form [project]="project" [concurrency]="selectedConcurrency" [verticalOrientation]="true" (refresh)="load()"></app-project-concurrency-form>
            <div class="runs">
                <h3>Workflow/Job running with this concurrency:</h3>
                <nz-table [nzData]="concurrencyRuns"
                    [nzFrontPagination]="false" nzSize="small" #runsTable>
                    <thead>
                        <tr>
                            <th [nzSortFn]="sortByDate" nzSortOrder="descend">Last Modified</th>
                            <th>Workflow Name</th>
                            <th>Job Name</th>
                            <th>Run number</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr *ngFor="let h of runsTable.data" class="pointing" [routerLink]="['/project', this.project.key, 'run', h.workflow_run_id]">
                            <td><app-date-from-now [value]="h.last_modified"></app-date-from-now></td>
                            <td>{{h.workflow_name}}</td>
                            <td>{{h.job_name}}</td>
                            <td>{{h.run_number}}</td>
                            <td>{{h.status}}</td>
                        </tr>
                    </tbody>
                </nz-table>
            </div>
        </ng-container>
    </nz-drawer>
</div>